<!doctype html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>一对多</title>
		<script src="js/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
		<!--<link rel="stylesheet" type="text/css" href="css/inputSkin.css"/>-->
		<style type="text/css">
			.fold {
				border: 1px solid salmon;
				margin-bottom: 10px;
			}
			
			.fold>.body {
				margin-left: 50px;
				margin-right: 10px;
			}
		</style>
	</head>

	<body>
		<p>复选框之间一对多的父子关系</p>
		<div class="fold">
			<div class="header">
				<!--<div class="inputSkin skin1">-->
				<input type="checkbox" value="食物" issued="食物" /><label for="">食物</label>
				<!--</div>-->
			</div>
			<div class="body">
				<div class="fold">
					<div class="header">
						<input type="checkbox" report="食物" issued="水果" /><label for="">水果</label>
					</div>
					<div class="body">
						<input type="checkbox" report="水果" /><label for="">苹果</label>

						<div class="fold">
							<div class="header">
								<input type="checkbox" report="水果" issued="橙子" /><label for="">橙子</label>

							</div>
							<div class="body">
								<input type="checkbox" report="橙子" /><label for="">甜橙</label>
								<input type="checkbox" report="橙子" /><label for="">酸橙</label>
							</div>
						</div>

					</div>
				</div>
				<div class="fold">
					<div class="header">
						<input type="checkbox" report="食物" issued="干果" /><label for="">干果</label>
					</div>
					<div class="body">
						<input type="checkbox" report="干果" /><label for="">板栗</label>
						<input type="checkbox" report="干果" /><label for="">核桃</label>
					</div>
				</div>
				<div class="fold">
					<div class="header">
						<input type="checkbox" report="食物" issued="蔬菜" /><label for="">蔬菜</label>
					</div>
					<div class="body">
						<input type="checkbox" report="蔬菜" /><label for="">菠菜</label>
						<input type="checkbox" report="蔬菜" /><label for="">茄子</label>
					</div>
				</div>
				<div class="fold">
					<div class="header">
						<input type="checkbox" report="食物" issued="肉食" /><label for="">肉食</label>
					</div>
					<div class="body">

						<div class="fold">
							<div class="header">
								<input type="checkbox" report="肉食" issued="猪肉" /><label for="">猪肉</label>
							</div>
							<div class="body">
								<input type="checkbox" report="猪肉" /><label for="">黑猪肉</label>
								<input type="checkbox" report="猪肉" /><label for="">白猪肉</label>
								<input type="checkbox" report="猪肉" /><label for="">野猪肉</label>
							</div>
						</div>

						<input type="checkbox" report="肉食" /><label for="">羊肉</label>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			$('input[issued]:checkbox').on('change', function(event) {
				$(this).trigger('issued');
			}).on('issued', function(event) {
				$('input[report=' + $(this).attr('issued') + ']')
					.prop('checked', this.checked)
					.filter('[issued]')
					.prop('indeterminate', false)
					.trigger('issued');
			});

			$('input[report]:checkbox').on('change', function(event) {
				$(this).trigger('report');
			}).on('report', function(event) {
				var report = $(this).attr('report');
				var reportInput = $('input[report=' + report + ']');
				var reportInput_checked = reportInput.filter(':checked');
				var reportInput_indeterminate = reportInput.map(function() {
					return this.indeterminate ? this : null;
				});
				var issued = $('input[issued=' + report + ']');
				issued.prop('checked', reportInput_checked.length)
					.prop('indeterminate', reportInput_indeterminate.length || reportInput_checked.length !== 0 && reportInput_checked.length !== reportInput.length)
					.filter('[report]')
					.trigger('report');
			});

			$(function($) {
				$('input[issued]:checked').trigger('issued');
				$('input[report]:checked').trigger('report');
			});
		</script>
	</body>

</html>